<template>
	<view class="page">
		<view class="header">
			<view class="enterHx" v-for="(item, index)  in pageList" :key="index" @click="nameClick(item.page)">
				{{ item.title }}
			</view>
		</view>
		<view class="content" v-for="(item, index) in boxList" :key="index" @click="boxTap(item)">
			<view class="yjs_box" v-if="item.status == 1">已结束</view>
			<view class="left_box">第{{ item.round }}箱</view>
			<view class="right_box">剩余{{ item.current_num }}张</view>
			<view class="select_box">
				<image :src="boxImage" mode="scaleToFill" />
			</view>
			<view class="selecttxt_box">
				<view class="top_txt_box">
					<view class="left_txt_box">隐藏款{{item.current_hidden_num}}/{{item.hidden_num}}</view>
					<view class="right_txt_box">全局款{{item.current_all_num}}/{{item.all_num}}</view>
				</view>
				<view class="bot_txt_box">普通款{{item.current_normal_num}}/{{item.normal_num}}</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			boxList: [],//箱子列表
			boxId: '',//盒子id
			pageList: [],//分页列表
			page: 1,//分页
			boxImage: '',//箱子图片
		}
	},
	onLoad(options) {
		this.boxId = options.box_id
		this.boxImage = options.boxImage
	},
	onShow() {
		this.getBoxRound()
	},
	methods: {
		getBoxRound() {
			let data = {
				box_id: this.boxId,
				page: this.page
			}
			this.$Request.get(this.$api.mhapi.getBoxRound, data).then(res => {
				this.boxList = res.data.data
				this.pageList = res.data.page_list
				console.log(res)
			})
		},
		nameClick(item) {
			this.page = item
			this.getBoxRound()
		},
		boxTap(item) {
			uni.navigateTo({
				url: '/rollPages/index/between?round=' + item.round + '&box_id=' + this.boxId
			})
		},

	}
}
</script>
<style lang="scss" scoped>
.page {
	width: 100vw;
	min-height: 100vh;
	background-image: url('https://mh.qingfentool.vip/upload/image/20230512/1b18b05905e022e5fb80fe153a39e46d.png');
	background-size: 100% 100%;

	.header {
		width: 96%;
		margin: auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 20rpx;

		.enterHx {
			width: 170rpx;
			height: 72rpx;
			background: rgba(0, 0, 0, 0.1);
			// box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			margin-right: 50rpx;
			border: 2rpx solid #FED187;
			margin-bottom: 20rpx;
			text-align: center;
			line-height: 72rpx;
			font-size: 34rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: 700;
			color: #FFFFFF;
		}
	}

	.content {
		width: 96%;
		height: 312rpx;
		background: rgba(0, 0, 0, 0.56);
		box-shadow: inset 0rpx 0rpx 102rpx 0rpx rgba(255, 189, 34, 0.3);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;
		border: 2rpx solid #FFCC00;
		margin: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
		margin-bottom: 20rpx;

		.yjs_box {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			text-align: center;
			line-height: 252rpx;
			position: absolute;
			font-size: 64rpx;
			font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
			font-weight: 400;
			color: #FFFFFF;
			z-index: 999;
		}

		.left_box {
			width: 142rpx;
			height: 46rpx;
			background: #2A2620;
			box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.5);
			border-radius: 16rpx 0rpx 16rpx 0rpx;
			opacity: 1;
			border: 2rpx solid #FED187;
			position: absolute;
			left: 0;
			top: 0;
			text-align: center;
			color: #fff;
			line-height: 46rpx;
		}

		.right_box {
			width: 200rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: 700;
			color: #FFFFFF;
			line-height: 40rpx;
			letter-spacing: 1px;
			text-align: right;
			padding-right: 22rpx;
			position: absolute;
			right: 0;
			top: 0;
		}

		.select_box {
			width: 172rpx;
			height: 175rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.selecttxt_box {
			width: 348rpx;
			height: 80rpx;

			.top_txt_box {
				width: 100%;
				height: 34rpx;
				line-height: 34rpx;
				margin-bottom: 12rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: HelloFont ID XuanZhenSong-Regular, HelloFont ID XuanZhenSong;
				font-weight: 400;
				color: #D59434;
				line-height: 34rpx;

				.left_txt_box,
				.right_txt_box {
					width: 50%;
					height: 100%;
				}
			}

			.bot_txt_box {
				width: 100%;
				height: 34rpx;
				line-height: 34rpx;
				margin-bottom: 12rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: HelloFont ID XuanZhenSong-Regular, HelloFont ID XuanZhenSong;
				font-weight: 400;
				color: #D59434;
				line-height: 34rpx;
			}
		}
	}


}
</style>